<template>
	<view class="uni-container">
		<view>
			<cu-custom bgColor="bg-gradual-blue">
				<block slot="content">分类</block>
			</cu-custom>
		</view>
		<view class="context">
			<button  type="primary" class="uploadButton" @click="toPdf">生成pdf</button>
			<checkbox-group @change="checkboxChange">
				<view class="image-item">
					<label class="uni-list-cell uni-list-cell-pd photoArrItem" v-for="(item,index) in photoArr" :key="index">
						<view class="photoArrItem-image">
							<image style="width: 50px; height: 50px; background-color: #eeeeee;" :src="item.showPath"></image>
						</view>
						<view class="photoArrItem-text">
						 <text style="font-size: 13;padding-top: 10px;">{{item.id}}</text><br>
						 <text style="font-size: 12;padding-top: 10px;">{{item.showFileName}}</text> 
						 </view>
						<view class="photoArrItem-checkbox"><checkbox :value="item.id" :checked="item.checked"> </checkbox></view>
						<view class="photoArrItem-checkbox" ><image src="../../static/trash.png" @click="deleteById(item.id)" style="width: 5vh;height: 5vh;" ></image></view>
					</label>
				</view>
			</checkbox-group>
		</view>
		
	</view>
</template>

<script>
	import url from '@/common/config.js'
	export default {
		components: {
		},
		data() {
			return {
				showSetTabBarPage: false,
				photoArr: [],
				navigateFlag: false,
				imageIds:[]
			}
		},
		onLoad() {
				this.getDocList()
				console.log("文档onload")
			},
			onReady() {
				console.log("文档onRead")
			},
			onShow() {
				this.getDocList()
				console.log("文档show")
			},
			onHide() {
				console.log("文档onhiden")
			},
			created() {
				this.getDocList()
					console.log("分类 created")
			},
			methods: {
				deleteById: function(id){
					let me = this
					me.photoArr.forEach((item,index)=>{
						console.log(item.id,"item.id")
						console.log(id,"id")
						console.log(index,"index")
						if(item.id===id){
							me.photoArr.splice(index,1)
						}
					})
				},
				checkboxChange: function(e) {
					var items = this.photoArr,
					values = e.detail.value;
					this.imageIds =  e.detail.value
					for (var i = 0, lenI = items.length; i < lenI; ++i) {
						const item = items[i]
						if (values.includes(item.id)) {
							this.$set(item, 'checked', true)
						} else {
							this.$set(item, 'checked', false)
						}
					}
				},
				toPdf: function() {
					console.log("this.imageIds",this.imageIds)
					let param = this.imageIds
					uni.showLoading({
						mask: true,
						title: 'pdf下载中……'
					});
					uni.downloadFile({
					    url: url.httpUrl+'/image/pdf?imageIds='+param, //仅为示例，并非真实的资源
					    success: (resd) => {
					        if (resd.statusCode === 200) {
					            console.log('下载成功',resd);
								   var filePath = resd.tempFilePath;
								     uni.openDocument({
								       filePath: filePath,
								       success: function (res) {
										 setTimeout(function () {
										     uni.hideLoading();
										 }, 2000);
								         console.log('打开文档成功');
								       },fail: ()=>{
										   setTimeout(function () {
										       uni.hideLoading();
										   }, 2000);
									   }
								     });
					        }
					    },
						fail:(err)=>{
							setTimeout(function () {
							    uni.hideLoading();
							}, 2000);
							console.log("err",err)
						}
					});
				},
				getDocList() {
					let me = this
					me.photoArr = []
					uni.request({
						url: url.httpUrl+'/getDocList',
						data: {
							name: ''
						},
						success: (res) => {
							res.data.data.forEach((item) => {
								me.photoArr.push(item)
							})
							console.log("me.photo",me.photoArr)
						},
						fail: (err) => {
							console.log(err)
						}
					});
				}
			}
		};
</script>

<style>
	/* @import '../../common/uni-nvue.css'; */
	.context{
		padding-top: 20px;
	}
	.photoArrItem{
	         flex-direction: row;
			 padding-top: 1vh;
			 padding-left: 18px;
	         height: 7vh;
			 justify-content:space-between
	}
	.photoArrItem-image{
	         flex: 1;
	}
	.photoArrItem-checkbox{
			flex: 1;
	}
	.photoArrItem-text{
		flex: 3;
	}
	.uploadButton{
		width: 200px;
	}
</style>
